<template>
    <div class="lx_start">
        <!-- 启动页图片 -->
        <div class="lx_start_top">
            <!-- 商店 -->
            <div class="lx_start_p1">小牛商店</div>
            <!-- p文字 -->
            <div class="lx_start_p2">在家里也能购物送货上门</div>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 启动页按钮 -->
        <div class="lx_start_bottom">
           <p @click="router.push('/userlogin')">开始使用</p>
        </div>

        <!-- 定时器三秒自动跳过 -->
        <div class="lx_settimes" @click="router.push('/userlogin')"> {{ countdown }} 秒</div>

    </div>
</template>

<script setup lang="ts">
// 引入图片
const images=[
   'https://t9.baidu.com/it/u=3966899740,4152939038&fm=193',
    'https://t9.baidu.com/it/u=3772815815,4208334326&fm=193',
    'https://pic.90sheji.com/design/02/81/20/69/5d27dcdb8166d.png%21/fwfh/2084x0/clip/0x1383a0a0/quality/90/unsharp/true/compress/true/watermark/url/LzkwX3dhdGVyX3Y2LnBuZw==/repeat/true'
]
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 获取路由实例
const route = useRoute();
const router = useRouter();

// 倒计时时间
const countdown = ref(6);

// 定时器 ID
let timerId;

// 启动定时器
const startTimer = () => {
  timerId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      // 清除定时器
      clearInterval(timerId);
      // 跳转到目标页面
      router.push('/userlogin');
    }
  }, 1000);
};

// 组件挂载时启动定时器
onMounted(() => {
  startTimer();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
  }
});
</script>

<style>
* {
    padding: 0;
    margin: 0;
}

.lx_start{
    width: 100vw;
    height: 100vh;
    /* background: palegreen; */
    position: relative;
}

.lx_start_top {
    width: 100vw;
    height: 500px;
    /* background: paleturquoise; */
    overflow: hidden;
}

.lx_start_bottom {
    width: 95vw;
    height: 60px;
    background: #00be8c;
    margin-top: 120px;
    
    overflow: hidden;
    margin-left: 10px;
    border-radius: 20px;
}

.lx_start_top img{
    width: 100%;
    /* height: 100px; */

}

.lx_start_p1{
    width: 100%;
    height: 60px;
    /* background: pink; */
    margin-top: 40px;
    text-align: center;
    font-size: 30px;
    color: #00be8c;
}

.lx_start_p2{
    width: 100%;
    height: 70px;
    /* background: red; */
    /* margin-top: 30px; */
    color: #9a949f;
    text-align: center;
}

.lx_start_bottom p{
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 18px;
} 

.lx_settimes{
    width: 70px;
    height: 30px;
    background: #f4f4f4;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 20px;
    right: 15px;
}
</style>